<script setup lang="ts">
import {reactive, ref, onMounted} from "vue";
import {Editor} from '@/components/Editor'
import {useRouter, useRoute} from "vue-router";
import {dataInfo, dataCheck} from "@/api/content";
import {columnList} from "@/api/column";
import {ElMessage} from "element-plus";

const router = useRouter()
const route = useRoute()
const formRef = ref()
const form = reactive({
  id: '',
  author_name: '',
  cate_id: '',
  title: '',
  keyword: '',
  descript: '',
  content: '',
  created_at: '',
  add_time: '',
  updated_at: '',
  view_time: 1,
  sort_time: 1,
  author_id: '',
  check_status:'',
  check_real_name:'',
  check_time:''
})
const checkForm = reactive({
  id: '',
  check_status: '2',
})
const srcList = ref([])
const loading = ref(false)
const columnOpt = ref([])
const change = (editor) => {
  console.log(editor.getHtml())
}

const handleBack = () => {
  router.back()
}

const handleCheck = async () => {
  let res = await dataCheck(checkForm)
  if (res) {
    ElMessage({message: '审核成功', type: 'success'})
    handleBack()
  }
}

const fetchData = async () => {
  loading.value = true
  let res = await dataInfo({id: route.query.id})
  loading.value = false
  if (res) {
    checkForm.id = res.data.id
    Object.assign(form, res.data)
    if (res.data.thumb_url){
      srcList.value = [res.data.thumb_url.url]
    }
  }
}

const getColumn = async () => {
  let res = await columnList();
  if (res) {
    columnOpt.value = res.data
  }
}

onMounted(() => {
  getColumn()
  fetchData()
})
</script>

<template>
  <el-row v-loading="loading">
    <el-col :span="18" class="el-wrap">
      <el-form :model="form" ref="formRef" label-width="100px">
        <el-col :span="10">
          <el-form-item label="栏目" prop="cate_id">
            <el-select v-model="form.cate_id" style="width: 100%;">
              <el-option v-for="item in columnOpt" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input placeholder="请输入标题" v-model="form.title"/>
          </el-form-item>
          <el-form-item label="缩略图" prop="title">
            <el-image fit="cover" style="width: 200px; height: 150px" :src="form.thumb_url?form.thumb_url.url:''"   :preview-src-list="srcList" />
          </el-form-item>
          <el-form-item label="关键字" prop="keyword">
            <el-input placeholder="请输入关键字" v-model="form.keyword"/>
          </el-form-item>
          <el-form-item label="描述" prop="descript">
            <el-input placeholder="请输入描述" type="textarea" autosize v-model="form.descript"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内容" prop="describe">
            <Editor v-model="form.content" ref="editorRef" @change="change"/>
          </el-form-item>
        </el-col>
      </el-form>
    </el-col>
    <el-col :span="5" :offset="1" class="el-wrap">
      <el-form :model="form" ref="formRef" label-width="100px">
        <el-form-item label="录入人">
          {{ form.author_name }}
        </el-form-item>
        <el-form-item label="录入时间" prop="created_at">
          <el-date-picker
              v-model="form.created_at"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="录入时间"
          />
        </el-form-item>
        <el-form-item label="更新时间" prop="updated_at">
          <el-date-picker
              v-model="form.updated_at"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="更新时间"
          />
        </el-form-item>
        <el-form-item label="浏览数" prop="view_time">
          <el-input-number v-model="form.view_time" :min="1"/>
        </el-form-item>
        <el-form-item label="排序值" prop="sort_time">
          <el-input-number v-model="form.sort_time" :min="1"/>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row>
    <!--    style="position: fixed;z-index: 999;bottom: 10px;border-top: 1px solid red;"-->
    <el-col :span="24" class="el-wrap">
      <el-form :model="checkForm" ref="formRef" label-width="100px">
        <el-col :span="10">
          <el-form-item label="当前状态" prop="column">
            {{form.check_status}}
          </el-form-item>
          <el-form-item label="处理账号" prop="title">
            {{ form.check_real_name ||'暂无'}}
          </el-form-item>
          <el-form-item label="处理时间" prop="keyword">
            {{ form.check_time || '暂无'}}
          </el-form-item>
          <el-form-item label="操作状态" prop="check_status">
            <el-radio-group v-model="checkForm.check_status">
              <el-radio label="2">通过</el-radio>
              <el-radio label="3">不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleCheck">提交审核</el-button>
            <el-button @click="handleBack">返回</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-col>
  </el-row>
</template>
<style scoped lang="less">
.el-wrap {
  background-color: #fff;
  padding: 40px 20px;
  margin-bottom: 30px;
}
</style>